<template>
    <div class="login">
        <NavHeader>
            <template v-slot:left>
                <span class="iconfont icon-fanhui" @click="goBack"></span>
            </template>
            <template v-slot:mid>
                <span>猫眼电影</span>
            </template>
        </NavHeader>

        <div class="login-wrap">
            <div class="phone-wrap">
                <input type="text" placeholder="请输入手机号" onkeyup="value=value.replace(/[^\d]/g,'')" />
                <div class="send-code-wrap">
                    <span>发送验证码</span>
                </div>
            </div>

            <div class="code-wrap">
                <input type="number" maxlength="6" placeholder="请输入短信验证码" />
            </div>
            <button @click="login">登录</button>
            <p>未注册的手机号将自动生成新账号</p>
            <div class="copyright">
                <span>&copy; 猫眼电影 客服电话：</span>
                <span>400-670-5335</span>
            </div>
        </div>
    </div>
</template>

<script setup name="Login">
import NavHeader from "components/common/NavHeader/index.vue";
import { useRouter } from "vue-router";
const router = useRouter();

// 登录
const login = () => {
    console.log(localStorage.getItem("loginType"));
    localStorage.setItem("loginType", true);
    router.push("/");
};

// 返回
const goBack = () => {
    router.go(-1);
};
</script>

<style lang="less" scoped>
.nav-header {
    span {
        color: white;
    }
}

.login-wrap {
    padding: 15px;
    .phone-wrap,
    .code-wrap {
        height: 42px;
        border-bottom: 1px solid #e5e5e5;
        .flex-center-between();
        input {
            flex: 1;
            height: 100%;
            border: none;
            background-color: #f5f5f5;
            outline: none;
            font-size: 14px;
            color: black;
        }
        .send-code-wrap {
            span {
                background-color: #dcdcdc;
                padding: 0 5px;
                color: #999;
                border-radius: 3px;
            }
        }
    }
    div,
    span {
        font-size: 14px;
    }

    button {
        width: 100%;
        border: none;
        outline: none;
        border-radius: 6px;
        padding: 10px 0;
        font-size: 16px;
        color: #999;
        margin-top: 20px;
    }
    p,
    .copyright {
        text-align: center;
        font-size: 13px;
        color: #999;
        margin-top: 15px;
    }
    .copyright {
        span:first-child {
            color: black;
        }
        span:last-child {
            color: @primary-color;
        }
    }
}
</style>
